<template>
    <view>
        <view class="one">
            <image :src="BigImg" mode="widthFix"></image>
        </view>
        <view class="two">
            <text class="total" :class="{ select: true, active: item.id === sel }"
                  v-for="(item,index) in tbs" :key="index"
                  @click="select(item)"
            >
                {{item.text}}
            </text>
        </view>
        <view class="three">
            <view class="jbj">
                <text>---</text>
                <text>惊爆价</text>
                <text>---</text>
            </view>
            <view v-for="item in img" class="four">
                <view class="img">
                    <image :src="item.imgSrc" mode="widthFix"></image>
                </view>
                <view class="text">
                    <view class="text1">{{item.name}}</view>
                    <view class="text2">{{item.text2}}</view>
                    <view class="text3">{{item.guiGe}}</view>
                    <view class="icon">
                        <text class="money1">￥{{item.price}}</text>
                        <text class="money2">￥{{item.money2}}</text>
                        <view  class="oprate" @click="addCar(item)" :data-goods = 'item'>
                            <gouwuche class="add" ></gouwuche>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <car :price="thisPrice"></car>
    </view>
</template>

<script>
    import * as api from  '../../until/api'
    import until from  '../../until/until'
    import gouwuche from '../../until/com/gouwuche'
    import car from '../../until/com/car'
    export default {
        name: "yhq",
        components:{
            gouwuche,
            car
        },
        data(){
            return{
                sel:1,
                tbs:[
                    {text:'惊爆价',id:1},
                    {text:'热带水果节',id:2},
                    {text:'新品尝鲜',id:3},
                    {text:'限时折扣',id:4}
                ],
                type: 'default',
                inverted: false,
                BigImg:[],
                img:[],
                thisPrice:0
            }
        },
        created(){
            let _this=this
                uni.request({
                url:api.getYouhuiqu,
                method:"post",
                success(res){
                    console.log(res.data.data)
                    console.log(res.data.titleImg)
                    _this.BigImg=res.data.titleImg
                    _this.img=res.data.data
                }
            })
        },
        methods: {
            addCar(item) {
                until.addToCar(item)
                this.thisPrice = parseInt(until.getMoneyNum())
                // console.log(this.thisPrice)
            },
            select(item) {
                console.log(item)
                this.sel = item.id;
            }
        }
    }
</script>

<style scoped>
.one,
.one>image{
    width: 100%;
}
    .two{
        display: flex;
        flex-direction: row;
        text-align: center;
    }
   .two>text{
       width: 25%;
       font-size:26rpx;
    }
   .total{

   }
   .select.active{
       color: #17B357;
   }
    .jbj{
        text-align: center;
        color: #17B357;
        margin: 0.2rem auto;
    }
   .four{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:space-between;
       border-bottom: 0.05rem solid #d4d4d4;
    }
    .img{
        float: left;
        height: 8rem;
        width: 24%;
        position: relative;
        overflow: hidden;
        margin: auto;
    }
    .img>image{
        width:100%;
    }
    .text{
        width: 66%;
        float:right;
        position: relative;
    }
    .text1,.text2,.text3,.money1.icon{
        height: 2rem;
        line-height: 2rem;
        text-align: left;
    }
    .text1{
    font-size: 1rem;
    font-weight: bold;
  }
    .text2{
        font-size:.9rem;
        color:#808080;
    }
    .text3{
        height: 2rem;
        position: relative;
    }
    .text3>text{
        position: absolute;
        left: 0;
        top: 0;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: .7rem;
        background-color: #C8C7CC;
        color:#808080 ;
    }
    .money1{
        float: left;
        color: #f40;
        font-size: 1.2rem;
    }
    .money2{
        float: left;
        color:#808080 ;
        text-decoration: line-through;
        margin-left: .2rem;
        font-size: .8rem;
    }
.oprate{
    width: 1rem;
    height: 1rem;
    position: absolute;
    bottom:1rem;
    right:1rem;
}
.add{
    width: 1rem!important;
    height: 1rem!important;
    position: absolute;
    left: -1rem;
    top: -1rem;
}

</style>